<template>
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/recommand">
      <span>推荐</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/singer">
      <span>歌手</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/rank">
      <span>排行榜</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/search">
      <span>搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
@import "../assets/css/function.less";
.tab {
  display: flex;
  .px2rem(height,88);
  width: 100%;
  align-items: center;
  justify-content: space-around;

  .tab-item {
    flex: 1;
    text-align: center;
    .px2rem(font-size,30);
    color: rgb(255, 255, 255);
    height: 100%;
    font-weight: 500;
    .px2rem(line-height,88);
    span {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
    &.router-link-exact-active {
      color: rgb(241, 193, 128);
      border-bottom: 2px solid rgb(83, 228, 238);
    }
  }
}
</style>

